<template>
  <div id="detailInfo" class="container" ref="container">
    <!-- <van-nav-bar :title="meetTitle" left-arrow fixed  @click-left="$common.backButtonClicked($route.query.from == 'default' ? 'default' : false)"></van-nav-bar> -->
    <div class="nav-container">
      <div class="content">
        <div class="panel">
          <div class="panel-mask"></div>
          <div class="panel-content">
            <div class="circle-img">
              <!--  "type": , 1待审批 2已审批 3拒绝 4已取消 -->
              <template v-if="type == '2'">
                <span class="circle-font">{{already == 1?'已开':already == 2?'待开':''}}</span>
                <template v-if="already == 1">
                  <img class="circle" src="../../assets/meeting/circle2.png">
                </template>
                <template v-if="already == 2">
                  <img class="circle" src="../../assets/meeting/circleRed2.png">
                </template>
              </template>
              <template v-else-if="type == '4'">
                <span class="circle-font-cancel">已取消</span>
                <img class="circle" src="../../assets/meeting/circleRed2.png">
              </template>
              <template v-else-if="type == '3'">
                <span class="circle-font-cancel">已拒绝</span>
                <img class="circle" src="../../assets/meeting/circleRed2.png">
              </template>
            </div>
            <p class="meet-title">{{conferenceroom.oname}}</p>
            <p class="meet-facility"><img class="little" src="../../assets/meeting/people.png">{{conferenceroom.number}}人</p>
            <p class="meet-facility"><img class="little" src="../../assets/meeting/tv.png" />
              <span class="margin-r-10" v-for="(item,i) in conferenceroom.facilities" :key="i" 
              v-if="i < 5">
              {{item}}
              </span>
              <span v-if="conferenceroom.facilities.length >= 6">......</span>
            </p>
          </div>
        </div>
        <div>
          <van-cell-group class="cell-group">
            <van-cell title="预约时间" :value="orderDate" title-class="cell-left-class"/>
          </van-cell-group>
          <van-cell-group class="cell-group">
            <van-cell title="会议名称" :value="meetTitle" title-class="cell-left-class"/>
            <van-cell title="会议类别" :value="otype.oname" title-class="cell-left-class"/>
            <van-cell title="会议记录" :value="recorduser.name" title-class="cell-left-class"/>
            <van-cell title="会议审批" :value="staffid.name" title-class="cell-left-class"/>
          </van-cell-group>
          <van-cell-group class="cell-group">
            <van-field
              v-model="persons"
              clearable
              :border="false"
              disabled
            >
              <div slot="label" class="cell-left-class">出席人员 <span class="label-right">{{attendance.length}}人</span></div>
              <span slot="button" class="more-btn" @click="checkAll">查看全部</span>
            </van-field>
            <div class="tag-class">
              <van-row gutter="12">
                <van-col span="4" v-for="(atten,j) in attendance" :key="j" v-if="j <= 4">
                  <template v-if="atten.pic == null">
                    <img class="tag-img" src="../../assets/notification/head.png" @click="checkIdCard(atten.id)">
                  </template>
                  <template v-else>
                    <img class="tag-img" :src="`${$common.filePath}${atten.pic}`" @click="checkIdCard(atten.id)">
                  </template>
                  <p class="title-text van-ellipsis">
                    {{atten.name}}
                  </p>
                </van-col>
                <van-col v-if="attendance.length > 5">
                  <img class="tag-img" src="../../assets/meeting/dot.png">
                  <p class="title-text van-ellipsis">
                    ......
                  </p>
                </van-col>
              </van-row>
            </div>
          </van-cell-group>
          <van-cell-group class="cell-group" :border="false">
            <van-field
              class="textarea-field"
              label-class="textarea-left-class"
              v-model="remarks"
              rows="2"
              label="会议议程"
              type="textarea"
            />
          </van-cell-group>
          <van-cell-group class="cell-group file-attachment-class">
            <van-field
              class="textarea-field margin-b-10"
              label-class="field-left-class"
              rows="1"
              disabled
              autosize
              label="会议附件"
              type="textarea"
            >
              <template slot="input">
                <div class="file-class" v-for="(file, fileIndex) in attachment" :key="fileIndex+'new'" @click="previewFile(file)">
                  <img class="img-class" :src="$common.fileIcon(fileName(file, 'type'))">
                  <p class="van-ellipsis name-width">{{ fileName(file, 'fullName') }}</p>
                </div>
              </template>
            </van-field>
          </van-cell-group>
        </div>
      </div>
    </div>

    <!-- 所有参会人员 -->
    <van-popup v-model="showAll" position="bottom" :close-on-click-overlay="false" 
    :safe-area-inset-bottom="true" :style="{height: '100vh'}">
      <div class="full-container">
        <!-- <van-nav-bar title="出席人员" left-text="返回" left-arrow  @click-left="goBack"></van-nav-bar> -->
        <div class="alls">
          <p class="information">共{{attendance.length}}人参会</p>
          <van-cell-group :border="false" v-for="(item,i) in attendance" :key="i">
            <van-cell>
              <template slot="title">
                <div class="flex-base" @click="checkIdCard(item.id)">
                  <template v-if="item.pic == null">
                    <img class="tag-img" src="../../assets/notification/head.png">
                  </template>
                  <template v-else>
                    <img class="tag-img" :src="`${$common.filePath}${item.pic}`">
                  </template>
                  <span class="title-text mrgin-l-15">
                    {{item.name}}
                  </span>
                </div>
              </template>
              <template slot="default">
                <div class="right-value">
                  <!-- <a><img class="custom-class" src="../../assets/meeting/message.png"></a> -->
                  <template v-if="item.phone != null">
                    <img class="custom-class" src="../../assets/meeting/tel.png" @click="phoneCall(item.phone)">
                  </template>
                </div>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script type="text/javascript">
  export default{
    data(){
      return{
        type: "",   //取消或者不是
        already: '',//页面当前会议状态是已开 or 待开
        meetTitle:'',
        remarks: "",
        persons: "",
        orderDate: '',
        attendance:[],//出席人员数组
        conferenceroom: {
          oname:"",
          number:"",
          facilities:[]
        },//会议室
        recorduser:"",//记录人员
        staffid:"",//审批人员
        otype:"",//类别
        showAll:false,

        attachment: [],   //会议附件
      }
    },
    activated() {
      this.type = ""
      this.already= ''//页面当前会议状态是已开 or 待开
      this.meetTitle= ''
      this.remarks= ""
      this.persons= ""
      this.orderDate= ''
      this.attendance= []//出席人员数组
      this.conferenceroom= {
        oname:"",
        number:"",
        facilities:[]
      }//会议室
      this.recorduser= ""//记录人员
      this.staffid= ""//审批人员
      this.otype= ""//类别
      this.showAll=false

      this.attachment = []
      if(this.$route.query.from && this.$route.query.from == 'origin') {
        console.log('来源是原生的~')
      } else {
        this.$bridge.callHandler('navBack')
      }
      this.$bridge.callHandler('navTitle', {title: '会议详情'})

      this.showData()


    },
    methods: {
      /**
       * 返回键
       * @return {[type]} [description]
       */
      onClickLeft() {
        this.$router.go(-1)
      },
      fileName(url, type) {
        let fullName   = !url.split('@daxsdfcsgr6time666@')[1] ? url : url.split('@daxsdfcsgr6time666@')[1]
        let pointCount = fullName.split('.').length
        let fileType   = fullName.split('.')[pointCount - 1]
        switch(type){
          case 'name':
            return fullName.split('.', pointCount - 1).join('.');
          case 'type':
            return fileType;
          case 'fullName':
          default:
            return fullName;
        }
      },
      /**
       * 预览-附件
       * @param  {[type]} item [description]
       * @return {[type]}      [description]
       */
      previewFile(item) {
        this.$bridge.callHandler('showPreview', {
          url: `${this.$common.filePath}${item}`,
          fileName:  this.fileName(item, 'fullName') || item
        })
        window.open(`${this.$common.filePath}${item}?filename=${this.fileName(item, 'fullName')}`)
      },
      /**
       * 显示数据
       * @return {[type]} [description]
       */
      showData() {
        let config = {
          method: "post",
          url: `${this.$common.basePath}meeting.php`,
          data: {
            do: "meetingedit",
            id: this.$route.query.id,
            user_id: this.$store.state.userId
          }
        }
        this.$axios(config).then(res => {
          let obj = res.data
          this.meetTitle = obj.title
          this.orderDate = (obj.startdate.split(" "))[0] + " " + this.$common.dateToTime(obj.startdate) + "-" + this.$common.dateToTime(obj.enddate)
          obj.conferenceroom.facilities = obj.conferenceroom.facilities.split(",")
          this.conferenceroom = obj.conferenceroom
          this.attendance = obj.attendance
          this.otype = obj.otype
          this.remarks = obj.content
          this.recorduser = obj.recorduser
          this.staffid = obj.staffid
          //meetingtype 1是会议开始 2是未开始
          this.already = obj.meetingtype

          this.attachment = obj.annex
          this.type = obj.type

          setTimeout(_ => {
            // 全屏左边按钮点击
            this.$bridge.registerHandler('fullScreenLeftClick',(data,response) => {
              this.showAll = false
              this.$bridge.callHandler('cancelFullScreen',{title:'会议详情'})
              response('leftClick')
            })
          },500)
        }).catch(err => {
        })
      },
      /** 
       * 查看所有人
       */
      checkAll(){
        this.$bridge.callHandler('openFullScreen',{left:'返 回',title:'出席人员'})
        this.showAll = true
      },
      /**
       * 出席人员返回
       * @return {[type]} [description]
       */
      goBack() {
        this.showAll = false
      },
      /**
       * 拨打电话
       * @return {[type]} [description]
       */
      phoneCall(phone) {
        this.$bridge.callHandler('makePhoneCall', { tel: phone })
      },
      /**
       * 用户名片
       * @param  {[type]} uid [description]
       * @return {[type]}     [description]
       */
      checkIdCard(uid) {
        console.log(uid)
        this.$bridge.callHandler('showUserInfo',{userId: uid})
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .container{
    background-color: #F5F5F5
  }
  .panel{
    background-image: url('../../assets/meeting/banner2.png');
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    color: #fff;
  }
  .panel-mask{
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
  }
  .panel-content{
    height: 100%;
    position: relative;
    top: -200px;
  }
  .circle-img{
    text-align: right;
  }
  .circle{
    width: 64px;
    height: 37px;
    z-index: -1;
  }
  .circle-font{
    position: absolute;
    top: 3%;
    right: 3%;
  }
  .circle-font-cancel {
    position: absolute;
    top: 2%;
    right: 1%;
  }
  .meet-title{
    padding-left: 20px;
    padding-top: 54px;
    font-size: 17px;
    font-weight: bold;
    color: #fff;
    margin-bottom: 10px;
  }
  .meet-people{
    padding-left: 20px;
    margin: 0 0 5px 0;
    font-size: 14px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .meet-facility{
    padding-left: 20px;
    font-size: 14px;
    margin: 0 0 5px 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .little{
    width: 16px;
    height: 16px;
    margin-right: 8px;
    color: #fff;
  }
  .cell-group{
    margin: 10px 0;
  }
  .tag-class{
    padding: 0 16px;
  }
  .van-tag{
    margin-right: 8px;
    margin-bottom: 8px;
  }
  .btn-class{
    padding: 5px 16px;
  }
  .full-container{
    height: 80vh;
  }
  .van-radio{
    margin: 20px 10px;
  }
  .van-sidebar-item--select{
    border-color: #2E79FF;
  }
  .van-tree-select__item--active{
    color: #2E79FF;
  }
  .label-right{
    font-size: 14px;
    color: #999999;
  }
  .more-btn{
    color: #2E79FF;
    font-size: 14px;
  }
  .add-btn{
    width: 45px;
    height: 45px;
    background-color: #F5F5F5;
    color: #979797;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .tag-img{
    width: 45px;
    height: 45px;
  }
  .tag-text{
    font-size: 14px;
    color: #333333;
    margin: -23px 0 0 0;
  }
  .delete-icon{
    position: relative;
    top: -22px;
    left: 58%;
    z-index: 3;
    background-color: #fff;
    border-radius: 50%;
  }
  .mrgin-l-15{
    margin-left: 15px;
  }
  .order-img{
    width: auto;
    height: 128px; 
  }
  .order-title{
    color: #2E79FF;
    text-align: center;
  }
  .order-left{
    max-width: 100px;
  }
  .order-content{
    text-align: left;
  }
  .cell-left-class{
    color: #999999;
    max-width: 100px;
    max-height: 100px;
  }
  .title-text{
    margin-top: 0;
    text-align: center;
  }

  .alls{
    // padding-top: 46px;

    .information{
      color: #999999;
      font-size: 14px;
      padding: 0 15px;
    }
  }
  .flex-base{
    display: flex;
    align-items: center;
  }
  .right-value{
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    a{
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      align-items: center;
    }
  }
  .title-text{
    font-size: 17px;
    color: #333333;
  }
  .custom-class{
    width: 24px;
    height: 24px;
    margin-right: 20px;
  }
  .padding-16{
    padding: 0 16px;
  }
  .margin-r-10{
    margin-right: 10px;
  }
  // 附件样式开始
  .file-attachment-class{
    margin-top: 10px;
    background-color: #F5F5F5;

    .file-class {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      padding: 4px 0;

      p {
        margin: 0;
      }

      .van-icon-clear {
        margin: 8px;
      }
    }
    .img-class {
      width: 20px;
      height: 23px;
      margin-right: 10px;
    }
    .name-width {
      max-width: calc(100% - 70px);
      min-width: calc(100% - 70px);
    }
  }
</style>
<style type="text/css" lang="less">
  #detailInfo {
    .van-nav-bar {
      position: fixed;
      width: 100vw;

      .van-nav-bar__text {
        color: #333333;
      }
    }
    .textarea-left-class {
      color: #999999;
      margin-bottom: 10px;
    }
    .van-field__control--custom {
      display: block;
    }
  }
</style>

